<template>
	<!-- 异常处理 -->
	<div>
		<v-container row class="text-subtitle-1 d-flex justify-center  align-left">
			<v-row class="mt-2">
				<!-- sm="6" md="2" -->
				<v-col cols="12" sm="3" md="2">
					<v-text-field label="异常处理状态" v-model="andonQuery.status" dense outlined>
					</v-text-field>
				</v-col>
				<!-- ml-n16 前面加n是间距 -->
				<!-- class="ml-n16 mx-auto" -->
				<v-col cols="12" sm="2" md="2">
					<v-btn depressed color="primary" @click="loadPages">查询</v-btn>
					<v-btn class="ml-3" depressed color="primary" @click="refreshLoadPages">
						刷新</v-btn>
				</v-col>
			</v-row>
		</v-container>
		<br />
		<!-- :single-select="true" -->
		<v-data-table :headers="andonHeaderList" :items="andonDataList" small fixed-header item-key="id" dense
			class="text-no-wrap" loading-text="正在加载请稍等......" :options.sync="andonOptions"
			:footer-props="vuetifyDefaultPage" :loading="andonLoading" :server-items-length="andonTotalCount">
			<template v-slot:item.actions="{ item }">
				<div>
					<v-btn small tile color="success" @click="replyDialog=true,andonModel=item">
						回复
					</v-btn>
				</div>
			</template>
			<template v-slot:item.statusname="{ item }">
				<a v-if="item.statusname=='待处理'" style="color: #67C23A;">{{item.statusname}}</a>
				<a v-else>{{item.statusname}}</a>
			</template>
			<template v-slot:item.url="{ item }">
				<a  @click="openLookPicsClick(item.url)">查看图片</a></td>
			</template>
		</v-data-table>

		<v-dialog v-model="replyDialog" max-width="800px">
			<v-card>
				<v-card-title>回复</v-card-title>
				<v-card-text>
					<v-row>
						<v-col cols="12" sm="6" md="4">
							<v-text-field label="异常类型" v-model="andonModel.typename" disabled dense outlined>
							</v-text-field>
						</v-col>

						<v-col cols="12" sm="6" md="4">
							<v-text-field label="责任人" v-model="andonModel.responsibleusername" disabled dense outlined>
							</v-text-field>
						</v-col>

						<v-col cols="12" sm="6" md="4">
							<v-text-field label="不合格数量" v-model="andonModel.exceptioncount" disabled dense outlined>
							</v-text-field>
						</v-col>
						<v-col cols="12">
							<v-textarea outlined name="input-7-4" label="异常描述" v-model="andonModel.exceptionmessage"
								:value="andonModel.exceptionmessage" disabled>
							</v-textarea>
						</v-col>
						<v-col cols="12">
							<v-textarea outlined name="input-7-4" label="回复" v-model="andonModel.replymessage"
								:value="andonModel.replymessage">
							</v-textarea>
						</v-col>
					</v-row>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="blue darken-1" text @click="editAndonSubmit">
						确定
					</v-btn>
					<v-btn color="blue darken-1" text @click="cannel">
						退出
					</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
		<showfiledialog :filesModel="fileDialogComment"></showfiledialog>
	</div>
</template>
<script>
	import showfiledialog from '../../comments/ShowFilesDialog.vue'
	export default {
		name: 'mes_andon_handler',
		components:{
			showfiledialog
		},
		data() {
			return {
				andonQuery: {
					name: '',
					status: '',
				},
				andonHeaderList: [],
				andonDataList: [],
				andonOptions: { //页数
					page: 1,
					//每页行数
					itemsPerPage: 10
				},
				andonLoading: true,
				andonTotalCount: 0,
				vuetifyDefaultPage: {
					'items-per-page-text': '每页个数',
					'items-per-page-options': [10, 20, 50, 100]
					// 'items-per-page-all-text': '100'
				},
				andonModel: {},
				replyDialog: false,
				fileDialogComment:{
					dialog: false,
					files: []
				},
			}
		},
		created() {
			this.GetHeader()
		},
		watch: {
			andonOptions: {
				handler() {
					this.loadPages()
				},
				deep: true
			},
		},
		methods: {
			async loadPages() {
				this.andonLoading = true
				var response = await this.$httpRequest({
					url: `/MES/MESAndonManger/LoadPages?
						status=${this.andonQuery.status}&
						pageNumber=${this.andonOptions.page}&
						pageSize=${this.andonOptions.itemsPerPage}`,
					method: 'get',
				})
				if (response.status == 1) {
					this.andonDataList = response.data.result
					this.andonTotalCount = response.data.pagination.totalRecords
					this.andonLoading = false
				} else {
					this.$message.error(response.info)
				}
			},
			async refreshLoadPages() {
				this.andonQuery.name = ''
				this.andonQuery.status = ''
				await this.loadPages()
			},
			async editAndonSubmit() {
				var response = await this.$httpRequest({
					url: `/MES/MESAndonManger/Update`,
					method: 'put',
					data: this.andonModel
				})
				if (response.status == 1) {
					this.$message.success(response.info)
					this.loadPages()
					this.cannel()
				} else {
					this.$message.error(response.info)
				}
			},
			cannel() {
				this.replyDialog = false
				this.andonModel = {}
			},
			//查看图片
			openLookPicsClick(pathstrs){
				this.fileDialogComment.dialog=true
				this.fileDialogComment.files=JSON.parse(pathstrs)
				
			},
			GetHeader() {
				this.andonHeaderList = [{
						text: '操作',
						align: 'center',
						value: 'actions',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '异常类型',
						align: 'center',
						value: 'typename',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '不合格数量',
						align: 'center',
						value: 'exceptioncount',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '异常状态',
						align: 'center',
						value: 'statusname',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '异常图片',
						align: 'center',
						value: 'url',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '所属部门',
						align: 'center',
						value: 'departmentname',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '责任人姓名',
						align: 'center',
						value: 'responsibleusername',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '发送人',
						align: 'center',
						value: 'created_byname',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '异常信息',
						align: 'center',
						value: 'exceptionmessage',
						filterable: false,
						class: 'fixed'
					},
					{
						text: '回复信息',
						align: 'center',
						value: 'replymessage',
						filterable: false,
						class: 'fixed'
					},
				]
			},
		},
	}
</script>

<style>
</style>
